<template>
    <div class="count">
        <h2>当前求和为：{{ sum }}，放大之后：{{ bigSum }}</h2>
        <h2>姓名是：{{ name }} 地址： {{ address }}</h2>
        <!-- .num将其转变数字，option标签中可能默认是字符 -->
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <!-- <p>{{ n }}</p> -->
        <button @click="addfun">加</button>
        <button @click="subfun">减</button>
        <!-- <h2>{{ a }} {{ b }} {{ c }} {{ d }} {{ list1 }} {{ list2 }}</h2> -->
        
        <ul>
            <li v-for="p in list2" :key="p.id">
                <!-- <li v-for="(p,index) in list2" :key="index"> -->
                <h2>{{ p.name }}-{{ p.id }}</h2>
            </li>
        </ul>

    </div>
</template>

<script setup name="Count">
    import { defineProps,withDefaults } from "vue";
    import {ref} from 'vue';
    import { useCountStore } from "@/store/count";
    import { toRefs } from "vue";
    import { storeToRefs } from "pinia";
    const countStore = useCountStore()

    let x = defineProps(['a','b','c','d','list1','list2'])
    
    // withDefaults(defineProps(),{
    //     list2:()=>[
    //         {id:'1241fsfds',name:"hhh"},
    //         {id:'sdfj2',name:'jjj'}
    //     ]
    // })

    //50subscibe的使用
    countStore.$subscribe(()=>{
        console.log('Count.vue中的调用了');
        
    })

    // let {sum,name,address} =countStore//可以不用一直写countStore.，但是此举会让数据失去响应式
    // let {sum,name,address} = toRefs(countStore)//此举虽然可以实现响应式，但会让counStore的所有属性变为响应式
    // 正解如下
    let {sum,name,address,bigSum} = storeToRefs(countStore)
    // storeToRefs只会关注store中的数据，不会对方法进行ref包裹
    // console.log('@',storeToRefs(countStore));
    

    // console.log(countStore);
    // 一下两种方式可以拿到数据
    // console.log(countStore.$state.sum);
    // // 虽然sum是一个ref，但是如果不是自己写的，就不用.value
    // console.log(countStore.sum);
    
    // 数据
    // let sum = ref(0);//当前求和
    let n = ref(1);//用户输入的值
    // 方法
    function addfun(){
        // 未使用pinia
        // sum.value = sum.value + n.value;
        // 修改数据的3中方法

        // 第1种
        // countStore.sum += n.value
        // 第2种
        // countStore.$patch({
        //     sum:100,
        //     name:'Jay',
        //     address:'Taibei'
        // })
        // 第3种，使用这种方式是为了复用 
        countStore.increment(n.value)
    }
    function subfun(){
        // sum.value = sum.value - n.value;
        countStore.sum -= n.value
    }
</script>

<style scoped>
    .count{
        background-color: skyblue;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 100px;
    }
    select,button{
        margin: 0 5px;
        height: 25px;
    }
</style>
